<template>
  <view> 
 
  <view class="title">
  	请选择角色扮演模板
  </view>
  <view class="conentRole">
	  
	  <view class="container">
	      <view class="role-list">
	        <view class="role-item" v-for="(role,index ) in roles " :key="role.id" @click="palyRoleChat(role)">
	          <image class="role-avatar" :src="role.roleImg"></image>
	          <text class="role-name" style="font-size: 14px;">{{ role.myRole }}</text>
	        </view>
	      </view>
	    </view>





  </view>
 </view>
</template>

<script>
export default {
  data() {
    return {
      roles: [
        {
          id: 0,
          myRole: "志愿者",
          roleContent: "记住你现在扮演的角色是志愿者，用志愿者的语气回复我",
          roleImg: "https://ts2.cn.mm.bing.net/th?id=OIP-C.hDoQPEjKVc_8Ylpb2rhzXAHaHZ&w=250&h=249&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2",
        },
        {
          id: 1,
          myRole: "环保人士",
          roleContent: "记住你现在扮演的角色是环保人士，用环保人士的语气回复我",
          roleImg: "https://ts3.cn.mm.bing.net/th?id=OIP-C.AJ0FoSBKwGctqAWtaICvFQHaGp&w=263&h=236&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2",
        },
        {
          id: 2,
          myRole: "梦想导师",
          roleContent: "记住你现在扮演的角色是梦想导师，用梦想导师的语气回复我",
          roleImg: "https://ts1.cn.mm.bing.net/th?id=OIP-C.KfQgLAD4avWCdHoWqATXBgAAAA&w=154&h=349&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2",
        },
        {
          id: 3,
          myRole: "学霸姐姐",
          roleContent: "记住你现在扮演的角色是学霸姐姐，用学霸姐姐的语气回复我",
          roleImg: "https://ts4.cn.mm.bing.net/th?id=OIP-C.bB3-_E9Lbl7JxQnBLTBOLgHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2",
        },
        {
          id: 4,
          myRole: "物理老师",
          roleContent: "记住你现在扮演的角色是物理老师，用物理老师的语气回复我",
          roleImg: "https://ts1.cn.mm.bing.net/th?id=OIP-C.HuyfrI-wELRtSLuAhZ_FxQHaFj&w=288&h=216&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2",
        },
		{
		  id: 5,
		  myRole: "白衣天使",
		  roleContent: "记住你现在扮演的角色是白衣天使，用白衣天使的语气回复我",
		  roleImg: "https://ts3.cn.mm.bing.net/th?id=OIP-C.zKSgV6LsIUOXhCYYxTx3nwHaLG&w=204&h=306&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2",
		},
		{
		  id: 6,
		  myRole: "创业人士",
		  roleContent: "记住你现在扮演的角色是创业者，用创业者的语气回复我",
		  roleImg: "https://tse3-mm.cn.bing.net/th/id/OIP-C.4BRVFyZPzg5qspXqjlndUQHaFK?pid=ImgDet&rs=1",
		},
      ],
	  chat_id:""
    };
  },
  methods: {
	  back() {
	  			uni.navigateBack();
	  		},
			palyRoleChat(role) {
				uni.setStorageSync('roleItem', role);
				this.sendRequest(role.roleContent)	
},
					
					
	sendRequest(content) {
	  const uid = uni.getStorageSync("uid");
	  const sendInfo = {
	    uid,
	    content,
	    chat_id: "new",
	    type: "chat",
	  };
	   uni.showLoading({
	        title: "加载中",
	      });
	  uni.request({
	    url: "http://aicreation.lipux.cn/ai",
	    data: sendInfo,
	    method: "POST",
	    success: (res) => {
			console.log(res);
	      if (res.data.code === 200) {
		   uni.hideLoading();
	        const chatItem = {
	          id: res.data.data.id,
	          role: res.data.data.role,
	          content: res.data.data.content,
	          date: res.data.data.updated_at,
	          type: "gpt",
	        };
	        this.chat_id = res.data.data.chat_id;
			uni.navigateTo({
				url: `../ai/aiChat/aiChat?chat=${this.chat_id}`
			});
	      }
	    },
	    fail: (err) => {
	      console.log(err);
	    },
	  });
	},
  },
};
</script>

<style>
	.container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  background-color: #F7F7F7;
	  height: 100vh;
	  padding: 20px;
	}
	 .title {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-top: 30px;
	  margin-bottom: 20px;
	  background-color: #FFC107;
	  padding: 10px 20px;
	  border-radius: 10px;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	}
	 .title-text {
	  font-size: 24px;
	  font-weight: bold;
	  color: #1B1B1B;
	  text-shadow: 1px 1px #FFF;
	}
	 .content-role {
	  display: flex;
	  justify-content: center;
	  width: 100%;
	  margin-top: 20px;
	}
	 .role-list {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  width: 100%;
	}
	 .role-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin: 10px;
	  cursor: pointer;
	  transition: all 0.3s ease-in-out;
	  background-color: #FFF;
	  border-radius: 10px;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	  overflow: hidden;
	  position: relative;
	}
	 .role-item:hover {
	  transform: scale(1.1);
	}
	 .role-avatar {
	  width: 60px;
	  height: 60px;
	  border-radius: 50%;
	  margin-bottom: 5px;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	}
	 .role-name {
	  font-size: 16px;
	  text-align: center;
	  color: #1B1B1B;
	  text-shadow: 1px 1px #FFF;
	  font-weight: bold;
	  font-family: 'Roboto', sans-serif;
	  letter-spacing: 1px;
	  padding: 10px;
	}
	 .role-item::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%);
	  z-index: 1;
	}
</style>
